<template>
  <div class="order-list-box">
    <div class="order-title">
      我的订单
    </div>
    <div class="order-list">
      <div class="order-stus">
        <div v-for="(item,index) in orderTab" :key="index" class="stus">
          <div :class="current == index ?'active-stus':''" @click="isActiveFn(item,index)">{{ item.name }}</div>
        </div>
      </div>
      <div>
        <table class=" order-tb">
          <thead class="">
            <tr class="">
              <th class="th01">订单详情</th>
              <th class="th02">收货人</th>
              <th class="th03">金额</th>
              <th class="th03">状态</th>
              <th class="th02">操作</th>
            </tr>
          </thead>
          <tbody v-for="(item,index) in orderData" :key="index" class="">

            <tr class="hifht20"><td colspan="5" /></tr>
            <tr class="tr-th">
              <td colspan="5">
                <span class="order-time ">{{ item.orderCreateTime }}</span>
                <span>订单号：{{ item.orderNo }}</span>
              </td>
            </tr>

            <tr class="tr-bd">
              <td>
                <div v-for="(ite,idx) in item.orderItemInfoList" :key="idx" class="goods-item">
                  <div class="p-img " @click="goProductDetailFn(ite.storeItemId)">
                    <img :src="ite.displayUrl" alt="">
                  </div>
                  <div class="p-msg" @click="goProductDetailFn(ite.storeItemId)">
                    {{ ite.itemName }}
                  </div>
                </div>

                <div class="goods-number">
                  x1
                </div>
              </td>
              <td>
                {{ item.recvUserRealName }}
              </td>
              <td>
                <div class="order-amount">
                  <span class="pay-amount">¥{{ item.incomePriceDouble }}</span> <br class="">
                  <span class="pay-type ">在线支付</span>
                </div>
              </td>
              <td>
                {{ enumeratFn.getEnumerationName('orderStatus',item.orderStatus) }}
              </td>
              <td>
                <div class="order-btn" @click="orderCancelFn(item.id)">取消订单</div>
                <div class="order-btn" @click="goPayFn(item)">立即付款</div>
                <div class="order-btn" @click="goOrderDetailFn(item.id)">查看详情</div>
              </td>
            </tr>

          </tbody>
          <tbody v-if="orderData.length == 0" class="nodata">
            <tr>
              <td colspan="5">
                <img src="../../../assets/image/no-img.png" alt="">
                <div>
                  最近没下过单哦~
                </div>

              </td>
            </tr>

          </tbody>

        </table>
      </div>
    </div>
    <div class="marginTop20 center">
      <template>
        <PAGER ref="wptxPager" @search="onChangePage" />
      </template>
    </div>
    <el-dialog
      title="取消订单"
      :visible.sync="cancelGialog"
      width="30%"
      center
    >
      <div>
        <el-input
          v-model="cancelReason"
          type="textarea"
          :rows="3"
          resize="none"
          placeholder="请输入内容"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelGialog = false">取 消</el-button>
        <el-button type="primary" @click="okBtnFn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { enumeratFn, ORDERTABSTUS } from '@/utils/enumeratCommon'
import { _orderList, _orderCancel } from '@/api/homePage'
import PAGER from '@/framework/commonTemplate/wptx_page'
export default {
  name: 'OrderList',
  components: {
    PAGER

  },

  data() {
    return {
      enumeratFn,
      orderData: [],
      orderTab: ORDERTABSTUS,

      current: 0,
      appOrderStatus: '',
      cancelGialog: false,
      cancelReason: '',
      id: '', // 订单取消id
      pageData: {
        pageNo: 1,
        pageSize: 10,
        totalCount: 1,
        pageSizes: [10, 20, 50, 100]
      }

    }
  },

  computed: {
  },
  watch: {

  },

  mounted() {
    console.log('获取store里的登录信息', this.$store.getters.userInfo)
    this.orderListFn()
  },
  methods: {
    // 跳转
    goJump(path, id) {
      const newPage = this.$router.resolve({
        path: path,
        query: {
          id: id
        }
      })
      window.open(newPage.href, '_blank')
    },
    // 立即付款
    goPayFn(item) {
      this.goJump('/submitOrder/orderPay', item)
    },
    // 查看详情
    goOrderDetailFn(id) {
      this.goJump('/orderPage/orderDetail', id)
    },
    // 商品详情
    goProductDetailFn(id) {
      this.goJump('/homePage/productDetail', id)
    },
    // 取消订单
    orderCancelFn(id) {
      this.cancelReason = ''
      this.cancelGialog = true
      this.id = id
    },
    okBtnFn() {
      if (!this.cancelReason) {
        this.$message({
          message: '请输入取消原因',
          type: 'warning'
        })
        return
      }

      const params = {
        id: this.id,
        cancelReason: this.cancelReason
      }
      _orderCancel(params).then((res) => {
        console.log('dddd', res)
        this.cancelGialog = false
        this.orderListFn()
      })
    },

    isActiveFn(item, index) {
      console.log(item, index)
      this.current = index

      this.appOrderStatus = item.code

      this.orderListFn()
    },

    async orderListFn() {
      const params = {
        appOrderStatus: this.appOrderStatus,
        plateSource: 1, // 第三方平台（1:城市运营订单  2:自营订单，3：租赁平台工业商城订单）
        userId: 145

      }
      const { result } = await _orderList({ ...this.pageData, ...params })
      if (result.result.length > 0) {
        this.orderData = result.result
        this.pageData.totalCount = result.totalCount

        this.$refs.wptxPager.updatePageData(this.pageData)
      } else {
        this.orderData = []
      }
    },
    // 分页
    onChangePage(data) {
      console.log('222', data)
      this.pageData = { ...this.pageData, ...data }
      this.orderListFn()
    }

  }
}
</script>
<style scoped lang="scss">
.order-list-box{
    width: 1200px;
    margin: 0 auto;
    table{
        border-collapse: collapse;
    }
    .order-title{
        padding: 15px 20px 20px;
        margin: 0 0 24px 0;
        background: #fff;
        font-size: 16px;
        color: #333;

    }

    .order-list{
        padding: 15px 20px 20px;
        margin-bottom: 20px;
        background: #fff;
     .order-stus{
        padding: 10px 0;

        .stus{
            display: inline-block;
            line-height: 30px;
            text-align: center;

            cursor: pointer;
            color: #333;
            margin-right: 20px;
            font-size: 15px;
            &:hover{
              color: rgb(64, 158, 254);
            }
            .active-stus{
            border-bottom: 2px solid #1B74E0;
            color: rgb(64, 158, 254);
            }
        }
     }
    .order-tb {
    width: 100%;
       .nodata{
      td{
        padding: 50px;
        text-align: center;
        color: #666;
      }
    }
    thead {
        th{
            height: 35px;
            line-height: 35px;
            text-align: center;
            background: #f5f5f5;
            color: #666;
            font-weight: 400;
        }
        .th01{
            width: 598px;
        }
        .th02{
            width: 115px;
        }
        .th03{
            width: 110px;
        }
    }
    tbody{

        td{
            color: #333;
        }
        .tr-th {
        background: #f5f5f5;
        height: 31px;
        line-height: 31px;
        color: #aaa;
        overflow: hidden;
        td {
            border-bottom-color: #f5f5f5;
            .order-time {
                margin: 0 24px;
                color: #aaa;
            }
        }
    }
    .tr-bd {
        text-align: center;
        vertical-align: top;
        td{
            border: 1px solid #e5e5e5;
            padding: 14px 0;
            .order-btn{
            margin: 0 0 15px 0;
            cursor: pointer;
             }
             .order-btn:hover {

                color: #1B74E0;
             }
            .order-amount{
                color: #aaa;
                span.pay-amount {

                    font-family: verdana;
                }
            span.pay-type {
                display: block;
                margin: 0 8px;
                margin-top: 5px;
                padding-top: 1px;
                border-top: solid 1px #E5E5E5;
                line-height: 19px;
                height: 19px;
                overflow: hidden;

            }
            }
            .goods-item{
                width: 390px;
                margin: 0 24px 15px 5px;
                float: left;
                .p-img {
                float: left;
                width: 60px;
                height: 60px;
                border: 1px solid #efefef;
                margin: 0 14px;

                position: relative;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .p-msg {
                width: 240px;
                float: left;
                text-align: left;
               margin-left: 10px;
               .p-name {
                height: 36px;
                line-height: 18px;
                overflow: hidden;
                color: #333;
                text-align: left;
            }
            }
            .goods-number {
                float: left;
                width: 40px;
                text-align: left;
                color: #aaa;
                font-family: verdana;
                width: 70px;
            }
            }
           .goods-item:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        }
    }
        .hifht20{
            height: 20px;
        }
    }
    }
    }
}
</style>
